<template>
    <div>
        <h2>我的商品</h2>
        <el-card v-for="(item, index) in items" :key="index" class="video-card">
            <div slot="header" class="video-header">
                <img :src="item.itemImg" class="video-cover" alt="Video Cover" />
                <div class="video-info">
                    <h3>{{ item.itemName }}</h3>
                    <p>总价：{{ item.price }}</p>
                </div>
                <p v-if="item.flag">已上架</p>
                <el-button type="primary" @click="list(item.itemId);item.flag=true" style="margin-left: 100px" v-if="!item.flag">上架</el-button>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import {onBeforeMount, onMounted, ref} from "vue";
import router from "@/router";
import {useRoute} from "vue-router";
import {getItemByShopId} from "@/api/shop";
import {getItemByBusinessId} from "@/api/item";
import {getItemListByItemId} from "@/api/item";
import {listItem} from "@/api/business";
import {ElMessage} from "element-plus";
const route=useRoute()
const shopId=ref(0)
const listedItems=ref([])
const allItems=ref([])
const items=ref([{}])
onBeforeMount(async () => {
    shopId.value=Number(route.query.shopId)
    let result=await getItemByBusinessId()
    allItems.value=result.data
    let result2=await getItemByShopId(shopId.value)
    listedItems.value=result2.data
    let result3=await getItemListByItemId(allItems.value)
    items.value=result3.data
    for (let i = 0; i < allItems.value.length; i++) {
        for (let j = 0; j < listedItems.value.length; j++) {
            if(allItems.value[i]===listedItems.value[j]){
                items.value[i].flag=true
                break
            }
        }
    }
});
async function list(itemId) {
    await listItem(shopId.value, itemId)
    ElMessage.success("上架成功")


}

</script>

<style scoped>


.video-card {
    margin-bottom: 20px;
}

.video-header {
    display: flex;
    align-items: center;
}

.video-cover {
    width: 100px;
    height: 80px;
    margin-right: 20px;
}

.video-info {
    flex: 1;
}

</style>